<%--
  Created by IntelliJ IDEA.
  User: zhangyuan
  Date: 2020-03-13
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会议室设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css?20190817.1">
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <script src="/lib/jquery.form.min.js"></script>
    <script src="/lib/layui/layui/js/common.js?v=20190726" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/js/baseCode/base.js?v=2019080918:09" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="headImg" style="margin-top: 10px">
    <span style="font-size:22px;margin-left:10px;color:#494d59;margin-top: 2px"><img style="margin-left:1.5%" src="../img/commonTheme/theme6/icon_manageRoom.png" alt=""><span style="margin-left: 10px">会议室设置</span></span>
</div>
<hr>
    <div style="padding: 8px;margin-left: 1.5%;margin-right: 1.5%;margin-top: -5px">
        <div style="text-align: right">
            <button type="button" class="layui-btn  add" >新建会议室</button>
        </div>
        <table id="meet" lay-filter="meet"></table>
    </div>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    <script>
        var form
        var tableIns
        layui.use(['table','form'], function(){
            var table = layui.table;
             form = layui.form;
            //第一个实例
            tableIns= table.render({
                elem: '#meet'
                ,url: '/hstMeetingRoom/getAllMeetRoomInfo' //数据接口
                ,where:{
                    useFlag:true
                }
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'roomName', title: '会议室名称',align:'center' }
                    ,{field: 'userIdsString', title: '开放使用人员',align:'center' }
                    ,{field: 'deptIdsString', title: '开放使用部门',align:'center'}
                    ,{field: 'privIdsString', title: '开放角色',align:'center' }
                    ,{field: 'roomNo', title: '会议室号',align:'center'}
                    ,{field: 'roomPwd', title: '会议室密码', align:'center'}
                    ,{field: 'serverAddr', title: '服务器地址', align:'center'}
                    ,{ title: '操作',align:'center', toolbar: '#barDemo',align:'center'} //这里的toolbar值是模板元素的选择器
                ]]
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "data": res.obj,//解析数据列表
                        "count": res.totleNum, //解析数据长度
                    };
                }
                ,request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
            });
            //监听工具条
            table.on('tool(meet)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'del'){ //删除
                    layer.confirm('确定要删除该条数据吗？', function(index){
                        $.ajax({
                            url:'/hstMeetingRoom/deleteMeetingRoom',
                            type: "post",
                            dataType: "json",
                            data:{
                                roomId:data.roomId,
                            },
                            success:function (res) {
                                if(res.flag){
                                    layer.msg('删除成功！',{icon:1, time: 2000}, function(){
                                        tableIns.reload()
                                        layer.close(index)
                                    });
                                }
                            }
                        })
                    });
                } else if(layEvent === 'edit'){ //编辑
                    creat(1,data)
                }
            });
        });
        $('.add').click(function () {
            creat(0)
        })
        function creat(type,obj) {
            if(type=='0'){
                var title = '新建'
                var url = '/hstMeetingRoom/insertMeetRoom'
            }else{
                var title = '编辑'
                var url = '/hstMeetingRoom/updateMeetingRoom'
            }
            layer.open({
                type: 1,
                title: title,
                btn:['确定','取消'],
                shade: 0.5,
                maxmin: true, //开启最大化最小化按钮
                area: ['50%', '80%'],
                content:'<form class="layui-form" id="ajaxforms" lay-filter="formsTest" style="width:90%;margin-left:5%;margin-top: 3%;">' +
                    '<div class="layui-form-item" >\n' +
                    '    <label class="layui-form-label">'+'会议室名称:'+'<span style="color:red">*</span>'+'</label>\n' +
                    '    <div class="layui-input-block">\n' +
                    '      <input type="text" name="roomName" title="会议室名称" required  lay-verify="required" autocomplete="off" class="layui-input ismust">\n' +
                    '    </div>\n' +
                    '  </div>'+
                    '<div class="layui-form-item" >\n' +
                    '    <label class="layui-form-label">会议室号:'+'<span style="color:red">*</span>'+'</label>\n' +
                    '    <div class="layui-input-block">\n' +
                    '      <input type="text" name="roomNo" title="会议室号" required  lay-verify="required" autocomplete="off" class="layui-input ismust">\n' +
                    '    </div>\n' +
                    '  </div>'+
                    '<div class="layui-form-item" >\n' +
                    '    <label class="layui-form-label">会议室密码:'+'<span style="color:red">*</span>'+'</label>\n' +
                    '    <div class="layui-input-block">\n' +
                    '      <input type="text" name="roomPwd" title="会议室密码" required  lay-verify="required" autocomplete="off" class="layui-input ismust">\n' +
                    '    </div>\n' +
                    '  </div>'+
                    '<div class="layui-form-item" >\n' +
                    '    <label class="layui-form-label">服务器地址:'+'<span style="color:red">*</span>'+'</label>\n' +
                    '    <div class="layui-input-block">\n' +
                    '      <input type="text" name="serverAddr" title="服务器地址" required  lay-verify="required" autocomplete="off" class="layui-input ismust">\n' +
                    '    </div>\n' +
                    '  </div>'+
                    '<div class="layui-form-item" >\n' +
                    '    <label class="layui-form-label" style="width:100px;padding: 9px 0px;">会议室管理员:'+'<span style="color:red">*</span></label>\n' +
                    '    <div class="layui-input-block" >\n' +
                    '      <textarea class="ismust" title="会议室管理员" type="text" name="roomManager" disabled id="userIdAdmin"  style="height: 45px;width: 370px;text-indent:1em;border-radius: 4px;"></textarea>\n' +
                    '<a href="javascript:;" style="color:#1E9FFF;margin-left:10px" class="userIdAdminAdd">添加</a>\n' +
                    ' <a href="javascript:;" style="color:#1E9FFF;margin-left:5px" class="userIdAdminDel">清空</a>\n'+
                    ' </div>\n' +
                    '  </div>\n' +
                    '<div class="layui-form-item" >\n' +
                    '    <label class="layui-form-label" style="width:100px;padding: 9px 0px;">开放使用人员:</label>\n' +
                    '    <div class="layui-input-block" >\n' +
                    '      <textarea class=""  type="text" name="userIds" disabled id="userId"  style="height: 45px;width: 370px;text-indent:1em;border-radius: 4px;"></textarea>\n' +
                    '<a href="javascript:;" style="color:#1E9FFF;margin-left:10px" class="userIdAdd">添加</a>\n' +
                    ' <a href="javascript:;" style="color:#1E9FFF;margin-left:5px" class="userIdDel">清空</a>\n'+
                    ' </div>\n' +
                    '  </div>\n' +
                    '<div class="layui-form-item" >\n' +
                    '    <label class="layui-form-label" style="width:100px;padding: 9px 0px;">开放使用部门:</label>\n' +
                    '    <div class="layui-input-block" >\n' +
                    '      <textarea class=""   type="text" name="deptIds" disabled id="deptId"   style="height: 45px;width: 370px;text-indent:1em;border-radius: 4px;"></textarea>\n' +
                    '<a href="javascript:;" style="color:#1E9FFF;margin-left:10px" class="deptIdAdd">添加</a>\n' +
                    ' <a href="javascript:;" style="color:#1E9FFF;margin-left:5px" class="deptIdDel">清空</a>\n'+
                    ' </div>\n' +
                    '  </div>\n' +
                    '<div class="layui-form-item" >\n' +
                    '    <label class="layui-form-label" style="width:100px;padding: 9px 0px;">开放角色:</label>\n' +
                    '    <div class="layui-input-block" >\n' +
                    '      <textarea class=""  type="text" name="privIds" disabled id="privId"  style="height: 45px;width: 370px;text-indent:1em;border-radius: 4px;"></textarea>\n' +
                    '<a href="javascript:;" style="color:#1E9FFF;margin-left:10px" class="privIdAdd">添加</a>\n' +
                    ' <a href="javascript:;" style="color:#1E9FFF;margin-left:5px" class="privIdDel">清空</a>\n'+
                    ' </div>\n' +
                    '  </div>\n' +
                    '</form>',
                success:function(){
                    if(type==1){
                        console.log(obj)
                        $('input[name="roomName"]').val(obj.roomName)
                        $('textarea[name="roomManager"]').val(obj.roomManagerName)
                        $('textarea[name="roomManager"]').attr('user_id',obj.roomManager)
                        $('textarea[name="userIds"]').val(obj.userIdsString)
                        $('textarea[name="userIds"]').attr('user_id',obj.userIds)
                        $('textarea[name="deptIds"]').val(obj.deptIdsString)
                        $('textarea[name="deptIds"]').attr('deptid',obj.deptIds)
                        $('textarea[name="privIds"]').val(obj.privIdsString)
                        $('textarea[name="privIds"]').attr('privid',obj.privIds)
                        $('input[name="roomNo"]').val(obj.roomNo)
                        $('input[name="roomPwd"]').val(obj.roomPwd)
                        $('input[name="serverAddr"]').val(obj.serverAddr)
                    }
                    //管理员的添加
                    $(".userIdAdminAdd").on("click",function(){
                        user_id = 'userIdAdmin';
                        $.popWindow("../common/selectUser");
                    });
                    //管理员的删除
                    $('.userIdAdminDel').click(function () {
                        $('#userIdAdmin').attr("dataid","");
                        $('#userIdAdmin').attr("user_id","");
                        $('#userIdAdmin').val("");
                    });
                    //开放使用人员的添加
                    $(".userIdAdd").on("click",function(){
                        user_id = 'userId';
                        $.popWindow("../common/selectUser");
                    });
                    //开放使用人员的删除
                    $('.userIdDel').click(function () {
                        $('#userId').attr("dataid","");
                        $('#userId').attr("user_id","");
                        $('#userId').val("");
                    });
                    //开放使用部门的添加
                    $(".deptIdAdd").on("click",function(){
                        dept_id = 'deptId';
                        $.popWindow("../common/selectDept");
                    });
                    //开放使用部门的删除
                    $('.deptIdDel').click(function () {
                        $('#deptId').attr("deptid","");
                        $('#deptId').attr("deptno","");
                        $('#deptId').val("");
                    });
                    //开放角色的添加
                    $(".privIdAdd").on("click",function(){
                        priv_id = 'privId';
                        $.popWindow("../common/selectPriv");
                    });
                    //开放角色的删除
                    $('.privIdDel').click(function () {
                        $('#privId').attr("privid","");
                        $('#privId').attr("userpriv","");
                        $('#privId').val("");
                    });

                },
                yes:function (index) {
                    for(var i=0;i<$('.ismust').length;i++){
                        if($('.ismust').eq(i).val()==''){
                            layer.msg($('.ismust').eq(i).attr('title')+'不能为空！',{icon:0});
                            return false
                        }
                    }
                    var s=$('#ajaxforms').serializeArray()
                    var data={}
                    $.each(s,function (key,value) {
                        data[value.name]=value.value
                    })
                    data.roomManager=$('textarea[name="roomManager"]').attr('user_id')
                    data.userIds=$('textarea[name="userIds"]').attr('user_id')
                    data.deptIds=$('textarea[name="deptIds"]').attr('deptid')
                    data.privIds=$('textarea[name="privIds"]').attr('privid')
                    if(type==1){
                        data.roomId=obj.roomId
                    }
                    $.ajax({
                        url:url,
                        type: "post",
                        dataType: "json",
                        data:data,
                        success:function (res) {
                            if(res.flag){
                                if(type==1){
                                    layer.msg('修改成功',{icon:1});
                                }else{
                                    layer.msg('新建成功',{icon:1});
                                }
                                layer.close(index);
                                tableIns.reload()
                            }
                        }
                    })
                }
            })
        }
    </script>
</body>
</html>
